<template>
  <div>
<!--所有课程信息统计-->
    <template>
      <div>
        <el-row class="data-container" gutter=20 style="margin: 15px;">
          <el-card class="data-card" shadow="hover" style="border: 2px solid #ad2d30; padding: 0px;">
            <el-row>
              <h2 style="margin: 0;">各课程开课数量</h2>
              <el-divider></el-divider>
            </el-row>
            <el-row>
              <el-col :span="4">
                <div class="data-list" style="margin: 10px 0;">
                  <p>Spark开课总数: <strong>{{ totalSparkCount }}</strong></p>
                  <p>Hive开课总数: <strong>{{ totalHiveCount }}</strong></p>
                  <p>Kafka开课总数: <strong>{{ totalKafkaCount }}</strong></p>
                  <p>Hadoop开课总数: <strong>{{ totalHadoopCount }}</strong></p>
                  <p>Flink开课总数: <strong>{{ totalFlinkCount }}</strong></p>
                  <p>HBase开课总数: <strong>{{ totalHbaseCount }}</strong></p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="chart-container" style="margin-top: 20px;">
                  <div ref="courseCountChart" style="width: 250%; height: 250px;"></div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
      </div>
    </template>
    <!--根据课程的出勤情况-->
    <div>
      <el-row class="data-container" gutter=20 style="margin: 15px;">
        <el-card class="data-card" shadow="hover" style="border: 2px solid #ad2d30; padding: 0px;">
          <el-row>
            <h2 style="margin: 0;">全体出勤情况</h2>
            <el-divider></el-divider>
          </el-row>
          <el-row>
            <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
              <el-table-column prop="status" label="状态" fixed width="120"></el-table-column>
              <el-table-column prop="total" label="全体学生" width="120"></el-table-column>
              <el-table-column prop="kafka" label="KafKa" width="120"></el-table-column>
              <el-table-column prop="spark" label="Spark" width="120"></el-table-column>
              <el-table-column prop="hbase" label="Hbase" width="120"></el-table-column>
              <el-table-column prop="hive" label="Hive" width="120"></el-table-column>
              <el-table-column prop="hadoop" label="Hadoop" width="120"></el-table-column>
              <el-table-column prop="flink" label="Flink" width="120"></el-table-column>
              <el-table-column prop="class220713" label="220713班" width="120"></el-table-column>
              <el-table-column prop="class220714" label="220714班" width="120"></el-table-column>
              <el-table-column prop="class220715" label="220715班" width="120"></el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </el-row>
    </div>
<!--根据班号的出勤情况-->
    <div>
      <el-row class="data-container" gutter=20 style="margin: 15px;">
        <el-card class="data-card" shadow="hover" style="border: 2px solid #ad2d30; padding: 0px;">
          <el-row>
            <el-row>
              <h2 style="margin: 0;">实时出勤情况</h2>
            </el-row>
            <el-divider></el-divider>
          </el-row>
          <el-row>
            <div class="chart-container" style="margin-top: 20px;">
              <div ref="LAChart" style="width: 100%; height: 400px;"></div>
            </div>
          </el-row>
        </el-card>
      </el-row>
    </div>

    <div>
      <el-row class="data-container" gutter=20 style="margin: 15px;">
        <el-card class="data-card" shadow="hover" style="border: 2px solid #ad2d30; padding: 0px;">
          <el-row>
            <el-row>
              <h2 style="margin: 0;">各个班级出勤信息</h2>
            </el-row>
            <el-divider></el-divider>
          </el-row>
          <div>
            <!-- 班级 220713 -->
            <el-row gutter="20" style="margin-bottom: 20px;">
              <el-col :xs="24" :sm="12">
                <el-card>
                  <h3 style="margin: 0; text-align: center;">班级 220713 出勤</h3>
                  <div ref="chart13L" style="width: 100%; height: 200px;"></div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="12">
                <el-card>
                  <h3 style="margin: 0; text-align: center;">班级 220713 缺勤</h3>
                  <div ref="chart13A" style="width: 100%; height: 200px;"></div>
                </el-card>
              </el-col>
            </el-row>
            <el-divider></el-divider>

            <!-- 班级 220714 -->
            <el-row gutter="20" style="margin-bottom: 20px;">
              <el-col :xs="24" :sm="12">
                <el-card>
                  <h3 style="margin: 0; text-align: center;">班级 220714 出勤</h3>
                  <div ref="chart14L" style="width: 100%; height: 200px;"></div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="12">
                <el-card>
                  <h3 style="margin: 0; text-align: center;">班级 220714 缺勤</h3>
                  <div ref="chart14A" style="width: 100%; height: 200px;"></div>
                </el-card>
              </el-col>
            </el-row>
            <el-divider></el-divider>

            <!-- 班级 220715 -->
            <el-row gutter="20" style="margin-bottom: 20px;">
              <el-col :xs="24" :sm="12">
                <el-card>
                  <h3 style="margin: 0; text-align: center;">班级 220715 出勤</h3>
                  <div ref="chart15L" style="width: 100%; height: 200px;"></div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="12">
                <el-card>
                  <h3 style="margin: 0; text-align: center;">班级 220715 缺勤</h3>
                  <div ref="chart15A" style="width: 100%; height: 200px;"></div>
                </el-card>
              </el-col>
            </el-row>
          </div>

        </el-card>
      </el-row>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";
export default {
  data() {
    return {
      studentsByClass: {
        "220713": {
          James: 0, Mary: 0, John: 0, Patricia: 0, Robert: 0, Jennifer: 0, Michael: 0,
          Linda: 0, William: 0, Elizabeth: 0, David: 0, Barbara: 0, Richard: 0, Susan: 0,
          Joseph: 0, Jessica: 0, Thomas: 0, Sarah: 0, Charles: 0, Karen: 0
        },
        "220714": {
          Christopher: 0, Nancy: 0, Daniel: 0, Lisa: 0, Matthew: 0, Margaret: 0, Anthony: 0,
          Betty: 0, Mark: 0, Sandra: 0, Paul: 0, Ashley: 0, Steven: 0, Dorothy: 0, Andrew: 0,
          Kimberly: 0, Kenneth: 0, Emily: 0, Joshua: 0, Donna: 0
        },
        "220715": {
          Kevin: 0, Michelle: 0, Brian: 0, Carol: 0, George: 0, Amanda: 0, Edward: 0,
          Melissa: 0, Ronald: 0, Deborah: 0, Timothy: 0, Stephanie: 0, Jason: 0, Rebecca: 0,
          Jeffrey: 0, Laura: 0, Ryan: 0, Helen: 0, Jacob: 0, Sharon: 0
        }
      },

      //表中的数据
      tableData: [],
      //当前时间
      currentTime: this.getCurrentTime(), // 初始化当前时间

      // CourseCount 数据
      totalSparkCount: 0,
      totalHiveCount: 0,
      totalKafkaCount: 0,
      totalHadoopCount: 0,
      totalFlinkCount: 0,
      totalHbaseCount: 0,
      currentSparkCount: 0,
      currentHiveCount: 0,
      currentKafkaCount: 0,
      currentHadoopCount: 0,
      currentFlinkCount: 0,
      currentHbaseCount: 0,

      // LACount数据
      currentA: 0,
      currentL: 0,
      totalA: 0,
      totalL: 0,

      //各班号实时出勤信息
      A13: 0,
      L13: 0,
      A14: 0,
      L14: 0,
      A15: 0,
      L15: 0,

      //各班号全部出勤信息
      total13A: 0,
      total13L: 0,
      total14A: 0,
      total14L: 0,
      total15A: 0,
      total15L: 0,

      // WebSocket 实例
      courseCountSocket: null,
      LACountSocket: null,
      LACountByClassSocket: null,
      LAndAByNameSocket: null,

      //开课总数的数据
      FlinkA: 0,
      FlinkL: 0,
      HadoopA: 0,
      HadoopL: 0,
      HiveA: 0,
      HiveL: 0,
      SparkA: 0,
      SparkL: 0,
      KafkaA: 0,
      KafkaL: 0,
      HBaseA: 0,
      HBaseL: 0,
    };
  },
  mounted() {
    // 饼图部分
    this.initCharts();
    this.startAutoRefresh();

    this.LAChart();
    this.initCourseCountWebSocket();
    this.initLACountWebSocket();
    this.initLACountByClassWebSocket();
    this.initLAndAByNameSocket();
    this.initCourseChart();
    this.updateCouresChart();

    this.initializeTableData();
    setInterval(this.initializeTableData,2000);

    this.fetchCourseData();
    setInterval(this.fetchCourseData, 5000);

    this.fetchClassData();
    setInterval(this.fetchClassData, 6000);
  },
  beforeDestroy() {
    clearInterval(this.autoRefreshInterval);
    if (this.courseCountSocket) {
      this.courseCountSocket.close();
    }
    if (this.LACountSocket) {
      this.LACountSocket.close();
    }
    if (this.LACountByClassSocket) {
      this.LACountByClassSocket.close();
    }
    if(this.LAndAByNameSocket) {
      this.LAndAByNameSocket.close();
    }

    clearInterval(this.initializeTableData);
    clearInterval(this.fetchCourseData);

    // 强制 ECharts 根据容器大小调整
    window.addEventListener('resize', this.chart.resize);
  },
  methods: {
    /*
    * 饼图部分
    * */
    // 初始化图表
    initCharts() {
      this.drawPieChart("chart13L", this.getChartData("220713", "L"), );
      this.drawPieChart("chart13A", this.getChartData("220713", "A"), );
      this.drawPieChart("chart14L", this.getChartData("220714", "L"), );
      this.drawPieChart("chart14A", this.getChartData("220714", "A"), );
      this.drawPieChart("chart15L", this.getChartData("220715", "L"), );
      this.drawPieChart("chart15A", this.getChartData("220715", "A"), );
    },

    // 启动定时器并刷新图表
    startAutoRefresh() {
      // 每2秒更新一次
      this.autoRefreshInterval = setInterval(() => {
        this.initCharts(); // 直接从 data 中读取数据并重新绘制图表
      }, 2000);
    },

    // 获取图表数据
    getChartData(classId, dataType) {
      const classData = this.studentsByClass[classId];
      const chartData = [];

      for (const [student, data] of Object.entries(classData)) {
        const value = data[dataType];
        if (value > 0) {
          chartData.push({ value, name: student });
        }
      }

      return chartData;
    },

    // 绘制饼图
    drawPieChart(refName, chartData, title) {
      const chartDom = this.$refs[refName];
      if (!chartDom) return;

      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: title,
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        /*legend: {
          top: "10%",
          orient: "vertical",
          left: "left",
        },*/
        series: [
          {
            name: title,
            type: "pie",
            radius: "80%",
            data: chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },

    /*
    * 为表加颜色
    * */
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 0) {
        return '.light-green'; // 第二行（索引为1）
      } else if (rowIndex === 1) {
        return '.light-red'; // 第三行（索引为2）
      }
      return '';
    },
    /*
    * 更新表
    * */
    initializeTableData() {
      this.tableData = [
        {
          status: '出勤人数',
          total: this.totalL,
          kafka: this.KafkaL,
          spark: this.SparkL,
          hbase: this.HBaseL,
          hive: this.HiveL,
          hadoop: this.HadoopL,
          flink: this.FlinkL,
          class220713: this.total13L,
          class220714: this.total14L,
          class220715: this.total15L,
        },
        {
          status: '缺勤人数',
          total: this.totalA,
          kafka: this.KafkaA,
          spark: this.SparkA,
          hbase: this.HBaseA,
          hive: this.HiveA,
          hadoop: this.HadoopA,
          flink: this.FlinkA,
          class220713: this.total13A,
          class220714: this.total14A,
          class220715: this.total15A,
        }
      ];
    },
    /*
    * 根据班号查询全部L&A
    * */
    fetchClassData() {
      axios.get("http://localhost:9090/data/class")
          .then(response => {
            if (response.data.code === 200) {
              response.data.data.forEach(course => {
                let classId = course.classId;
                if (classId === "220713") {
                  this.total13A = course.acount;
                  this.total13L = course.lcount;
                } else if (classId === "220714") {
                  this.total14A = course.acount;
                  this.total14L = course.lcount;
                } else if (classId === "220715") {
                  this.total15A = course.acount;
                  this.total15L = course.lcount;
                }
              });
              console.log("success class");
            } else {
              console.error("请求失败: " + response.data.message);
            }
          })
          .catch(err => {
            console.error("AJAX请求错误: ", err);
          });
    },
    /*
    * 根据课程名查询全部L&A
    * */
    fetchCourseData() {
      axios.get("http://localhost:9090/data/course")
          .then(response => {
            if (response.data.code === 200) {
              response.data.data.forEach(course => {
                let courseName = course.course;
                if (this.hasOwnProperty(courseName + 'A')) {
                  this[courseName + 'A'] = course.acount;
                }
                if (this.hasOwnProperty(courseName + 'L')) {
                  this[courseName + 'L'] = course.lcount;
                }
              });
              console.log("success course"); // 输出更新后的数据
            } else {
              //console.error("请求失败: " + response.data.message);
            }
          })
          .catch(err => {
            //console.error("AJAX请求错误: ", err);
          });
    },

    /*
    * 获取时间
    * */
    getCurrentTime() {
      const now = new Date();
      return now.toLocaleTimeString(); // 返回格式化的时间字符串
    },
    updateCurrentTime() {
      this.currentTime = this.getCurrentTime(); // 更新当前时间
      this.updateCouresChart(); // 每秒更新一次图表
    },

    /*
    * 图表
    * */
    //course
    initCourseChart() {
      this.chart = echarts.init(this.$refs.courseCountChart); // 初始化图表
      this.updateCouresChart(); // 初始化图表时也更新一次
      setInterval(this.updateCurrentTime, 1000); // 每秒更新一次时间
    },
    updateCouresChart() {
      const option = {
        title: {
          text: this.currentTime +'实时课程统计',
          x: 'center',
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: [
            'Spark',
            'Hive',
            'Kafka',
            'Hadoop',
            'Flink',
            'HBase'
          ],
          axisLabel: {
            rotate: 0, // 旋转标签，改为45度
            interval: 0 // 显示所有标签
          }
        },
        yAxis: {
          type: 'value', // 将 yAxis 设置为 'value' 类型
          min: 0,
          max: 5,
          interval: 1, // 设置 y 轴间隔为 1
          axisLabel: {
            formatter: function(value) {
              return value.toFixed(0); // 格式化为整数
            }
          }
        },
        series: [
          {
            name: '开课数量',
            type: 'bar',
            data: [
              this.currentSparkCount,
              this.currentHiveCount,
              this.currentKafkaCount,
              this.currentHadoopCount,
              this.currentFlinkCount,
              this.currentHbaseCount
            ],
            itemStyle: {
              color: '#409EFF' // 柱状图的颜色
            }
          }
        ]
      };
      this.chart.setOption(option);
    },

    //LA图表
    LAChart() {
      const myChart = echarts.init(this.$refs.LAChart);

      // 初始化时间数组
      const time = (function () {
        let now = new Date();
        let res = [];
        let len = 5;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
          now = new Date(+now - 2000);
        }
        return res;
      })();

      const LCount = {
        LallCount: Array(5).fill(0),
        L13Count: Array(5).fill(0),
        L14Count: Array(5).fill(0),
        L15Count: Array(5).fill(0)
      };

      const ACount = {
        AallCount: Array(5).fill(0),
        A13Count: Array(5).fill(0),
        A14Count: Array(5).fill(0),
        A15Count: Array(5).fill(0)
      };

      // ECharts 配置
      let options = {
        title: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        grid: {
          show: true,
          backgroundColor: '#f0f0f0'
        },
        legend: {
          data: [
            '全体学生出勤数',
            '全体学生缺勤数',
            '13班出勤数',
            '13班缺勤数',
            '14班出勤数',
            '14班缺勤数',
            '15班出勤数',
            '15班缺勤数'
          ]
        },
        xAxis: {
          type: 'category',
          data: time,
          boundaryGap: true
        },
        yAxis: {
          type: 'value',
          scale: true
        },
        series: [
          {
            name: '全体学生出勤数',
            type: 'line',
            data: LCount.LallCount
          },
          {
            name: '全体学生缺勤数',
            type: 'line',
            data: ACount.AallCount
          },
          ...[13, 14, 15].flatMap(classNum => [
            {
              name: `${classNum}班出勤数`,
              type: 'line',
              data: LCount[`L${classNum}Count`]
            },
            {
              name: `${classNum}班缺勤数`,
              type: 'line',
              data: ACount[`A${classNum}Count`]
            }
          ])
        ]
      };

      myChart.setOption(options);

      // 定时更新数据
      setInterval(() => {
        let nowTime = new Date().toLocaleTimeString().replace(/^\D*/, '');
        time.shift();
        time.push(nowTime);

        // 从 data 中读取当前的出勤和缺勤数据
        const totalL = this.currentL; // 读取当前出勤
        const totalA = this.currentA; // 读取当前缺勤

        // 更新全体学生的出勤和缺勤数据
        LCount.LallCount.shift();
        LCount.LallCount.push(totalA);

        ACount.AallCount.shift();
        ACount.AallCount.push(totalL);

        // 更新各个班级的出勤和缺勤数据
        LCount.L13Count.shift();
        LCount.L13Count.push(this.L13);

        ACount.A13Count.shift();
        ACount.A13Count.push(this.A13);

        LCount.L14Count.shift();
        LCount.L14Count.push(this.L14);

        ACount.A14Count.shift();
        ACount.A14Count.push(this.A14);

        LCount.L15Count.shift();
        LCount.L15Count.push(this.L15);

        ACount.A15Count.shift();
        ACount.A15Count.push(this.A15);

        // 更新 ECharts 图表
        myChart.setOption({
          xAxis: {
            data: time
          },
          series: [
            { data: LCount.LallCount },
            { data: ACount.AallCount },
            ...[13, 14, 15].flatMap(classNum => [
              { data: LCount[`L${classNum}Count`] },
              { data: ACount[`A${classNum}Count`] }
            ])
          ]
        });
      }, 2000);
    },




    /*
    * socket建立连接
    * */
    initCourseCountWebSocket() {
      this.courseCountSocket = new WebSocket('ws://localhost:9090/websocket/CourseCount');

      this.courseCountSocket.onopen = () => {
        console.log('CourseCount WebSocket connection established.');
      };

      this.courseCountSocket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        function parseCount(value) {
          if (typeof value === 'string' && !isNaN(value)) {
            return Number(value); // 转换为数字
          }
          return value; // 如果不是字符串或不是数字，则返回原值
        }
        // 更新 CourseCount 的状态
        this.totalSparkCount = parseCount(data.totalCounts.totalSparkCount);
        this.totalHiveCount = parseCount(data.totalCounts.totalHiveCount);
        this.totalKafkaCount = parseCount(data.totalCounts.totalKafkaCount);
        this.totalHadoopCount = parseCount(data.totalCounts.totalHadoopCount);
        this.totalFlinkCount = parseCount(data.totalCounts.totalFlinkCount);
        this.totalHbaseCount = parseCount(data.totalCounts.totalHbaseCount);

        this.currentSparkCount = parseCount(data.currentCounts.currentSparkCount);
        this.currentHiveCount = parseCount(data.currentCounts.currentHiveCount);
        this.currentKafkaCount = parseCount(data.currentCounts.currentKafkaCount);
        this.currentHadoopCount = parseCount(data.currentCounts.currentHadoopCount);
        this.currentFlinkCount = parseCount(data.currentCounts.currentFlinkCount);
        this.currentHbaseCount = parseCount(data.currentCounts.currentHbaseCount);

        //console.log('CourseCount message from server:', data);
      };

      this.courseCountSocket.onclose = () => {
        //console.log('CourseCount WebSocket connection closed.');
      };

      this.courseCountSocket.onerror = (error) => {
        //console.error('CourseCount WebSocket error:', error);
      };
    },

    initLACountWebSocket() {
      this.LACountSocket = new WebSocket('ws://localhost:9090/websocket/LACount');

      this.LACountSocket.onopen = () => {
        console.log('LACount WebSocket connection established.');
      };

      this.LACountSocket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        //
        this.currentA = data.currentA;
        this.currentL = data.currentL;
        this.totalA = data.totalA;
        this.totalL = data.totalL;

        //console.log('LACount WebSocket message from server:', data);
      };

      this.LACountSocket.onclose = () => {
        //console.log('LACount WebSocket connection closed.');
      };

      this.LACountSocket.onerror = (error) => {
        //console.error('LACount WebSocket error:', error);
      };
    },

    initLACountByClassWebSocket() {
      this.LACountByClassSocket = new WebSocket('ws://localhost:9090/websocket/LACountByClass');

      this.LACountByClassSocket.onopen = () => {
        //console.log('LACount WebSocket connection established.');
      };

      this.LACountByClassSocket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        // 遍历数据并赋值
        data.forEach(item => {
          const classId = item.classId; // 从 classId 中提取最后两位数字
          const countA = item.countA;
          const countL = item.countL;

          if (classId === '220713') {
            this.A13 = countA; // 累加 countA
            this.L13 = countL; // 累加 countL
          } else if (classId === '220714') {
            this.A14 = countA;
            this.L14 = countL;
          } else if (classId === '220715') {
            this.A15 = countA;
            this.L15 = countL;
          }
        });

        //console.log('LACountByClass WebSocket message from server:', data);
      };

      this.LACountSocket.onclose = () => {
        //console.log('LACountByClass WebSocket connection closed.');
      };

      this.LACountSocket.onerror = (error) => {
        //console.error('LACountByClass WebSocket error:', error);
      };
    },

    initLAndAByNameSocket() {
      // 创建 WebSocket 连接
      this.LAndAByNameSocket = new WebSocket('ws://localhost:9090/websocket/LAndAByName');

      // 连接打开时的处理逻辑
      this.LAndAByNameSocket.onopen = () => {
        console.log('WebSocket connection opened');
      };

      // 接收到消息时的处理逻辑
      this.LAndAByNameSocket.onmessage = (event) => {
        const data = JSON.parse(event.data); // 解析收到的 JSON 数据

        // 遍历接收到的数据并更新本地的 studentsByClass
        Object.keys(data).forEach(classId => {
          if (this.studentsByClass[classId]) {
            data[classId].forEach(student => {
              const studentName = student.studentName;

              // 检查学生是否存在于 studentsByClass 中
              if (this.studentsByClass[classId][studentName] !== undefined) {
                // 更新学生的值
                this.studentsByClass[classId][studentName] = {
                  L: student.L,
                  A: student.A
                };
              } else {
                // 如果学生不存在，则动态添加学生信息
                this.studentsByClass[classId][studentName] = {
                  L: student.L,
                  A: student.A
                };
                console.warn(`Student ${studentName} added to class ${classId}`);
              }
            });
          } else {
            // 如果班级不存在，可以记录警告或者动态添加
            console.warn(`Class ${classId} not found in studentsByClass`);
          }
        });

        console.log('Updated studentsByClass:', this.studentsByClass);
      };

      // 连接关闭时的处理逻辑
      this.LAndAByNameSocket.onclose = () => {
        console.log('WebSocket connection closed');
      };

      // 连接出错时的处理逻辑
      this.LAndAByNameSocket.onerror = (error) => {
        console.error('WebSocket error:', error);
      };
    }

  }
};
</script>

<style scoped>
.light-green {
  background-color: #e0f7e0; /* 浅绿色 */
}

.light-red {
  background-color: #f7d6d6; /* 浅红色 */
}
</style>